<template>
  <div v-if="showlogin" class="login">
       <div class="logins">
         <div class="wait" v-if="logingo">
           <mu-circular-progress class="demo-circular-progress logingo" :size="36" ></mu-circular-progress>
           <span style="font-size:.2rem">正在登录...</span>
         </div>
         <b @click="close" class="el-icon-circle-close"></b>
         <div class="denglu">
           <span @click="messlogin">短信登录</span>
           <span @click="pwdlogin">密码登录</span>
           <i ref="iii"></i>
         </div>
          <mu-container>
        <mu-form ref="form" :model="validateForm" class="mu-demo-form">
        <mu-form-item label="用户名" help-text="帮助文字" prop="username" :rules="usernameRules">
      <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
    </mu-form-item>
    <mu-form-item label="密码" prop="password" :rules="passwordRules">
        <mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
    </mu-form-item>
    <mu-form-item class="xieyi" prop="isAgree" :rules="argeeRules">
      <mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
       <span v-if="wrong"  style="font-size:.1rem ;color:red;">用户名或密码输入错误请重新输入！！！</span>
       <span v-if="succeed"  style="font-size:.1rem ;color:red;">欢迎登录!</span>
    </mu-form-item>
    <mu-form-item class="tijiao">
      <mu-button color="primary" @click="submit">提交</mu-button>
      <mu-button @click="clear">重置</mu-button>
    </mu-form-item>
  </mu-form>
</mu-container>
      </div>
  </div>

</template>

<script>
import { mapMutations,mapState,mapActions} from 'vuex';
export default {
  computed:{
    ...mapState(["successLogin","id"])
  },
data () {
    return {
      showlogin:true,
      succeed:false,
      wrong:false,
      logingo:false,
      password:'',
      username:'',
      usernameRules: [
        { validate: (val) => !!val, message: '必须填写用户名'},
        { validate: (val) => val.length >= 4, message: '用户名长度大于4'}
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码'},
        { validate: (val) => val.length >= 8 && val.length <= 16, message: '密码长度大于8小于16'}
      ],
      argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],
      validateForm: {
        username: '',
        password: '',
        isAgree: false
      }
    }
  },
  methods: {
    ...mapMutations(['gologin',"getshuju",'setArr']),
    ...mapActions(["getuserdata"]),
    close(){
      this.showlogin=false
    },
    messlogin(){
      this.$refs.iii.style.left="1rem"
      this.$refs.iii.style.transition="all .8s"
    },
    pwdlogin(){
      this.$refs.iii.style.left="4rem"
      this.$refs.iii.style.transition="all .8s"
    },
  submit () {
    this.wrong=false
      this.$refs.form.validate().then((result) => {
         if(result){
           this.logingo=true
            this.$http.get("/loginapi/login",{
             params:{
               username:this.validateForm.username,
               password:this.validateForm.password
             }
           }).then((res=>{
             let {data} = res;
             if(data.status==1&&data){
               this.succeed=true;//这个是出现欢迎登录
               this.$store.commit("gologin",Number(data.id))
               window.localStorage.setItem("token",data.token)
              this.$http({
                url:"http://192.168.58.87:8080/userdata/"+data.id,
                method:"get",
              }).then(res=>{
                 if(res){
                let {data} = res;            
                this.$store.commit("setArr",data)
                }
              })
               setTimeout(()=>{
                 this.logingo=false;//这个是显示登录页面开关
                 this.showlogin=false
               },1500)
             }else if(data.status==0||!data){
               this.wrong=true;
               this.logingo=false;
             }
           }))
         }else{
           this.wrong=true//这个是登录失败
         }
      })
    },
    clear () {
      this.$refs.form.clear();
      this.validateForm = {
        username: '',
        password: '',
        isAgree: false
      };
       this.wrong=false
    }
  }
};
</script>
<style scoped>
.login{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
}
.logins{
  width: 80%;
  height: 7rem;
  border-radius: .3rem;
  background-color: white;
  position: absolute;
  left: 50%;top:40%;
  transform: translate(-50%,-50%);
}
.mu-demo-form {
  width: 100%;
  max-width: 460px;
}
.tijiao{
  min-width: 4rem;
  min-height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.xieyi{
  margin: 0;
  padding: 0;
}
.denglu{
  width: 100%;
  height: 1rem;
  font-size: .4rem;
  display: flex;
  justify-content:space-around;
  align-items: center;
  font-weight: 700;
  position: relative;
}
.denglu>i{
  position: absolute;
  display: block;
  left: 4rem;
  bottom: 0;
  width: 1rem;
  height: .1rem;
  background-color: brown;
}
.el-icon-circle-close{
  position: absolute;
  font-size: .6rem;
  right: 0;
  top: -0.7rem;
  color: white;
}
.wait{
  width: 2rem;
  height: 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 50%;top:50%;
  transform: translate(-50%,-50%);
  color: dodgerblue;
}
</style>